<template>
	<view>
		<view class="headerBox">
			<view class="headerMain between">
				<view v-for="(n,i) in headetList">
					<view>{{n.tit}}</view>
					<view class="headerVal">{{n.val}}</view>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<view class="titBox between">
				<view v-for="(tit,i) in titList" :style="{'margin-left':i==1 ? '20%':'0'}">{{tit}}</view>
			</view>
			<view class="between oneLine" v-for="(item,i) in list">
				<view class="photoBox flex">
					<!-- <image :src="item.headimg"></image> -->
					{{item.nickname}}
				</view>
				<view>{{item.createtime.substring(0,10)}}</view>
				<view>{{item.totalcommission}}</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
			<view style="height: 50px;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getMyTeam
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				list: [],
				noMoreData: false,
				pagenum: 1,
				titList: ['姓名', '时间', '累计消费'],
				headetList: [{
						tit: '成长值',
						val: '--'
					},
					{
						tit: '贡献度',
						val: '5000'
					},
					{
						tit: '粉丝人数',
						val: '20'
					},
				],
			}
		},
		onLoad() {
			this.onGetMyTeam()
		},
		onReachBottom() {
			this.pagenum += 1
			this.onGetMyTeam('bottom')
		},
		methods: {
			async onGetMyTeam(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/myteam', {
					pagenum: this.pagenum
				})
				const {
					userlevel,
					totalcommission,
					data,
					userinfo,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.headetList[0].val = userlevel.name
					this.headetList[1].val = totalcommission
					this.headetList[2].val = userinfo.myteamCount
					type == 'bottom' ? this.list.push(...data) : this.list = data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;
	
		image {
			width: 400rpx;
			height: 400rpx;
		}
	}
	.oneLine {
		align-items: center;
		font-size: 28rpx;
		padding: 20rpx 0;
	}

	.photoBox {
		align-items: center;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
	}

	.mainBox {
		padding: 50rpx 40rpx;
	}

	.titBox {
		color: #CCCCCC;
	}

	.headerBox {
		background: linear-gradient(0deg, #FFA025, #41644A);
		height: 240rpx;
		padding-top: 50rpx;
	}

	.headerMain {
		color: #B3B3B3;
		background: #fff;
		border-radius: 30rpx;
		margin: 0 30rpx;
		padding: 50rpx;
		text-align: center;

		.headerVal {
			color: #FF9320;
			font-size: 38rpx;
			margin-top: 10rpx;
		}
	}
</style>
